<template>
  <div class="picture-list">
    <!--图片列表-->
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :loading="loading"
    >
      <template #renderItem="{ item: picture }">
        <a-list-item style="padding: 0">
          <a-card hoverable @click="doClickPic(picture)">
            <template #cover>
              <img
                :alt="picture.name"
                :src="picture.url"
                style="height: 180px; object-fit: cover"
              />
            </template>
            <a-card-meta :title="picture.name">
              <template #description>
                <a-flex>
                  <a-tag color="green">
                    {{ picture.category || '默认' }}
                  </a-tag>
                  <a-tag v-for="tag in picture.tags" :key="tag">{{ tag }}</a-tag>
                </a-flex>
              </template>
            </a-card-meta>
            <template #actions v-if="showAction">
              <a-space @click="(e) => doEdit(picture, e)">
                <EditOutlined />
                编辑
              </a-space>
              <a-space @click="(e) => doDelete(picture, e)">
                <DeleteOutlined />
                删除
              </a-space>
            </template>
          </a-card>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { DeleteOutlined, EditOutlined } from '@ant-design/icons-vue'
import { deletePictureByIdUsingDelete } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'

interface Props {
  dataList?: API.PictureVO[]
  loading?: boolean
  showAction: boolean
  onReload: () => void
}

const props = withDefaults(defineProps<Props>(), {
  dataList: () => [],
  loading: false,
  showAction: false,
})

const router = useRouter()
const doClickPic = (picture: API.PictureVO) => {
  router.push({
    path: `/picture/${picture.id}`,
  })
}
const doEdit = (picture: API.PictureVO, e) => {
  e.stopPropagation()
  router.push({
    path: `/add_pic`,
    query: {
      id: picture.id,
      spaceId: picture.spaceId,
    },
  })
}
const doDelete = async (picture: API.PictureVO, e) => {
  e.stopPropagation()
  const pictureId = picture.id
  if (pictureId) {
    await deletePictureByIdUsingDelete({ id: pictureId })
    message.success('删除成功')
    props.onReload?.()
  }
}
</script>

<style scoped></style>
